<template>
	<view>
		<!--头部-->
		<view class="navbarbox">
			<view class="navbar">
				<view class="navbarrow">
					<view class="navbarli" @click="itemdata(0)" :class="current==0?'navbarli-in':''">大神榜</view>
					<view class="navbarli" @click="itemdata(1)" :class="current==1?'navbarli-in':''">一抓即中榜</view>
					<view class='databox-av'
						:style='current == 0 ? "left:18.5%;" : "" || current == 1 ? "left:68.5%;" : "" '>
					</view>
				</view>
				<view style="flex: 1;"></view>
				<image @click="explainopen" class="explain" src="../../static/icon/aa/explain.png"></image>
				<image @click="ranking" class="ranking" src="../../static/icon/aa/ranking.png"></image>

				<!-- <image @click="cancela" class="navbarimage" src="../../static/icon/lefticon-icon.png"></image> -->
			</view>
		</view>

		<!-- 列表数据 -->
		<view>
			<swiper class="tab-content" :autoplay="false" @change="changeSwiper" :current="current"
				:style="{ height: swiperHeight + 'px' }">
				<swiper-item>
					<scroll-view scroll-y="true" class="scoll-h">
						<block>
							<view class="listbox" :id="'content-wrap' + current">
								<!-- <view style="width: 100%;height: 90rpx;"></view> -->
								<view class="beij">
									<view class="beijitem rank1">
										<view class="rank1image">
											<image class="rank1image-image" src="../../static/icon/aa/rank1.png">
											</image>
											<image class="rank1image-avatar"
												src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FpvbDk3wsJbEmHkNlyGSyVIR9vf9.png">
											</image>
										</view>
										<view
											style="font-size: 50rpx;color:#ffffff;font-weight: bold;margin-top: 10rpx;">
											No.1</view>
										<view
											style="font-size: 28rpx;color: #ffffff;font-weight: 600;margin-bottom: 12rpx;">
											荼**柔</view>
										<view class="rank1item flex ac jc">
											<image src="../../static/icon/aa/tupbio.png"></image>
											<view style="font-size: 28rpx;color: #ffffff;font-weight: 600;">356个</view>
										</view>
									</view>
									<view class="beijitem rank2">
										<view class="rank2image">
											<image class="rank2image-image" src="../../static/icon/aa/rank2.png">
											</image>
											<image class="rank2image-avatar"
												src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/ww_morentouxiang.png">
											</image>
										</view>
										<view
											style="font-size: 30rpx;color:#ffffff;font-weight: bold;margin-top: 10rpx;">
											No.2</view>
										<view
											style="font-size: 26rpx;color: #ffffff;font-weight: 600;margin: 5rpx 0 5rpx 0;">
											你****事</view>
										<view class="rank2item flex ac jc">
											<image src="../../static/icon/aa/tupbio.png"></image>
											<view style="font-size: 23rpx;color: #ffffff;font-weight: 600;">312个</view>
										</view>
									</view>
									<view class="beijitem rank3">
										<view class="rank3image">
											<image class="rank3image-image" src="../../static/icon/aa/rank3.png">
											</image>
											<image class="rank3image-avatar"
												src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/FjMAZEIDzJE7basd3LbmOMIQuBce.png">
											</image>
										</view>
										<view
											style="font-size: 30rpx;color:#ffffff;font-weight: bold;margin-top: 10rpx;">
											No.3</view>
										<view
											style="font-size: 26rpx;color: #ffffff;font-weight: 600;margin: 5rpx 0 5rpx 0;">
											甜**主</view>
										<view class="rank3item flex ac jc">
											<image src="../../static/icon/aa/tupbio.png"></image>
											<view style="font-size: 23rpx;color: #ffffff;font-weight: 600;">243个</view>
										</view>
									</view>
								</view>
								<view class="rank-box">
									<view class="rank-list flex ac">
										<view
											style="font-size: 35rpx;font-weight:bold;color:#353535;margin-left: 15rpx;">
											4</view>
										<image style="width: 80rpx;height: 80rpx;border-radius: 50%;margin: 0 30rpx;"
											src="https://thirdwx.qlogo.cn/mmopen/vi_32/Ue3H5dvdgRGCbnOoTKBpm8af2nhM56cs45PTvcUo2ewLUYfpicFaBv4xRdc6AH2PzUiagxl8GqGDiaXqlTLIh2vFtG43j13U0IXIujFfrVribUo/132">
										</image>
										<view style="flex: 1;font-size: 28rpx;">抱*****z</view>
										<view style="font-size: 30rpx;color:#ff4e2e;font-weight: bold;">238个</view>
									</view>
									<view class="rank-list flex ac">
										<view
											style="font-size: 35rpx;font-weight:bold;color:#353535;margin-left: 15rpx;">
											5</view>
										<image style="width: 80rpx;height: 80rpx;border-radius: 50%;margin: 0 30rpx;"
											src="https://thirdwx.qlogo.cn/mmopen/vi_32/Ue3H5dvdgRGCbnOoTKBpm8af2nhM56cs45PTvcUo2ewLUYfpicFaBv4xRdc6AH2PzUiagxl8GqGDiaXqlTLIh2vFtG43j13U0IXIujFfrVribUo/132">
										</image>
										<view style="flex: 1;font-size: 28rpx;">抱*****z</view>
										<view style="font-size: 30rpx;color:#ff4e2e;font-weight: bold;">238个</view>
									</view>
									<view class="rank-list flex ac">
										<view
											style="font-size: 35rpx;font-weight:bold;color:#353535;margin-left: 15rpx;">
											6</view>
										<image style="width: 80rpx;height: 80rpx;border-radius: 50%;margin: 0 30rpx;"
											src="https://thirdwx.qlogo.cn/mmopen/vi_32/Ue3H5dvdgRGCbnOoTKBpm8af2nhM56cs45PTvcUo2ewLUYfpicFaBv4xRdc6AH2PzUiagxl8GqGDiaXqlTLIh2vFtG43j13U0IXIujFfrVribUo/132">
										</image>
										<view style="flex: 1;font-size: 28rpx;">抱*****z</view>
										<view style="font-size: 30rpx;color:#ff4e2e;font-weight: bold;">238个</view>
									</view>
									<view class="rank-list flex ac">
										<view
											style="font-size: 35rpx;font-weight:bold;color:#353535;margin-left: 15rpx;">
											7</view>
										<image style="width: 80rpx;height: 80rpx;border-radius: 50%;margin: 0 30rpx;"
											src="https://thirdwx.qlogo.cn/mmopen/vi_32/Ue3H5dvdgRGCbnOoTKBpm8af2nhM56cs45PTvcUo2ewLUYfpicFaBv4xRdc6AH2PzUiagxl8GqGDiaXqlTLIh2vFtG43j13U0IXIujFfrVribUo/132">
										</image>
										<view style="flex: 1;font-size: 28rpx;">抱*****z</view>
										<view style="font-size: 30rpx;color:#ff4e2e;font-weight: bold;">238个</view>
									</view>
									<view class="rank-list flex ac">
										<view
											style="font-size: 35rpx;font-weight:bold;color:#353535;margin-left: 15rpx;">
											8</view>
										<image style="width: 80rpx;height: 80rpx;border-radius: 50%;margin: 0 30rpx;"
											src="https://thirdwx.qlogo.cn/mmopen/vi_32/Ue3H5dvdgRGCbnOoTKBpm8af2nhM56cs45PTvcUo2ewLUYfpicFaBv4xRdc6AH2PzUiagxl8GqGDiaXqlTLIh2vFtG43j13U0IXIujFfrVribUo/132">
										</image>
										<view style="flex: 1;font-size: 28rpx;">抱*****z</view>
										<view style="font-size: 30rpx;color:#ff4e2e;font-weight: bold;">238个</view>
									</view>
									<view class="rank-list flex ac">
										<view
											style="font-size: 35rpx;font-weight:bold;color:#353535;margin-left: 15rpx;">
											9</view>
										<image style="width: 80rpx;height: 80rpx;border-radius: 50%;margin: 0 30rpx;"
											src="https://thirdwx.qlogo.cn/mmopen/vi_32/Ue3H5dvdgRGCbnOoTKBpm8af2nhM56cs45PTvcUo2ewLUYfpicFaBv4xRdc6AH2PzUiagxl8GqGDiaXqlTLIh2vFtG43j13U0IXIujFfrVribUo/132">
										</image>
										<view style="flex: 1;font-size: 28rpx;">抱*****z</view>
										<view style="font-size: 30rpx;color:#ff4e2e;font-weight: bold;">238个</view>
									</view>
									<view class="rank-list flex ac">
										<view
											style="font-size: 35rpx;font-weight:bold;color:#353535;margin-left: 15rpx;">
											10</view>
										<image style="width: 80rpx;height: 80rpx;border-radius: 50%;margin: 0 30rpx;"
											src="https://thirdwx.qlogo.cn/mmopen/vi_32/Ue3H5dvdgRGCbnOoTKBpm8af2nhM56cs45PTvcUo2ewLUYfpicFaBv4xRdc6AH2PzUiagxl8GqGDiaXqlTLIh2vFtG43j13U0IXIujFfrVribUo/132">
										</image>
										<view style="flex: 1;font-size: 28rpx;">抱*****z</view>
										<view style="font-size: 30rpx;color:#ff4e2e;font-weight: bold;">238个</view>
									</view>
								</view>
								<view style="width: 100%;height: 200rpx;"></view>
							</view>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 弹窗 -->
		<view v-if="explainvalie==true" class="explainbox">
			<view class="explainview">
				<view class="explaintitle">大神榜说明</view>
				<view class="explaintext">
					<view>① 大神榜统计周期：统计每周一00:00:00至周日23:59:59的数据，每周一00:00:00重置榜单。</view>
					<view>② 大神榜统计规则：大神榜只计算抓中的娃娃，保夹、补单、平台赠送不计算在大神榜内。</view>
					<view>③ 每周的大神榜TOP10排名结果以当期大神榜结束时间的排名为准。若榜单出现数值相同的情况时，则按照获得此数值的时间越早排名越靠前逻辑，即以榜单排名为准。</view>
					<view>④ 大神榜周榜TOP10可获得对应奖励，详情见榜单奖励弹窗。本周的周榜TOP10奖励将于下周一10:00:00发放至获奖玩家的U币余额。</view>
					<view>⑤ 本平台在法律允许的范围内对活动规则有修改、终止的权利。如有疑问请咨询在线客服。</view>
				</view>
				<view style="width: 100%;height: 30rpx;"></view>
			</view>
			<view style="margin-top: 30rpx;">
				<image @click="explainclose" style="width: 60rpx;height: 60rpx;" src="../../static/icon/aa/closeaa.png"></image>
			</view>
		</view>

		<!-- 底部 -->
		<!-- <view class="buttombox flex ac">
			<image
				src="https://duimianimg.loovee.com/MediaServerMblove/servlet/Proxy/PhotoServlet/Fr8k33Xgzk5Fm4o_pISalJeAX3Gh.png">
			</image>
			<view style="flex: 1;">
				<view style="font-size: 26rpx;">178****2836</view>
				<view class="flex ac" style="font-size: 26rpx;margin-top: 10rpx;">
					<view>未上榜</view>
					<view style="margin-left: 20rpx;">抓中</view>
					<view style="color: #ff4e2e;font-weight: bold;">0个</view>
				</view>
			</view>
			<view class="buttomtxt" @click="make">打榜</view>
		</view> -->


	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				explainvalie:false,
				current: 0,
				swiperHeight: 0, //滑块的高度(单位px)
			}
		},

		onLoad(e) {
			//动态设置swiper的高度
			this.$nextTick(() => {
				this.setSwiperHeight();
			});
			this.listRankingdata()
		},

		methods: {
			async listRankingdata(e) {
				let apply = await request(`${getApp().globalData.http}listRanking`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					cls:1,
				})
				console.log(apply.data.data)
			},
			
			explainclose(e){
				this.explainvalie = false
			},
			
			explainopen(e){
				this.explainvalie = true
			},
			
			ranking(e){
				uni.navigateTo({
					url: '/pages/rankinglist/rankinglist'
				})
			},
			
			cancela(e) {
				uni.navigateBack({
					dalta: 1,
				})
			},

			make(e) {
				uni.reLaunch({
					url: '../home/home'
				})
			},

			//手动切换题目
			changeSwiper(e) {
				this.current = e.detail.current;
				//动态设置swiper的高度，使用nextTick延时设置
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},

			//动态设置swiper的高度
			setSwiperHeight() {
				let element = "#content-wrap" + this.current;
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
						console.log(res[0].height, "啊大大")
					}
				});
			},

			itemdata(e) {
				this.current = e
			}
		}
	}
</script>

<style lang="scss">
	@import url("ranking.css");

	// 弹窗说明
	.explainbox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 1002;
		background-color: rgba(0, 0, 0, .7);
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction:column;		
	}

	.explainview {
		width: 570rpx;
		// height: 680rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding:  0 20rpx;
	}

	.explaintitle {
		font-size: 33rpx;
		text-align: center;
		color: #2d2d2d;
		font-weight: bold;
		margin-top: 60rpx;
		margin-bottom: 30rpx;
	}
	
	.explaintext{
		height:500rpx;
		overflow-y: scroll;
	}
</style>